<template>
    <div class="centercontainer">
        <div class="left">
            <img :src="SongDetails.coverImgUrl" alt="" class="touxiang">
            <div class="playcount">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang"></use>
                </svg>
                <span class="count">{{changeCount(SongDetails.playCount)}}</span>
            </div>
        </div>

        <div class="right">
            <div class="top">{{SongDetails.name}}</div>
            <div class="center" v-if="SongDetails.creator">
                <img :src="SongDetails.creator.backgroundUrl" alt="" class="authorimg">
                <span class="nickname">
                    {{ SongDetails.creator.nickname }}
                </span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </div>
            <div class="bottom">
                <span class="drcipt">{{SongDetails.description}}</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </div>
        </div>
        

    </div>
</template>

<script>

export default {
    name: 'ItemDetailscenter',
     // 接收SongDetails组件传来的SongDetailsd的数据
     setup(props){
       
        // console.log(props);
        function changeCount(num) { 
                    if (num>=100000000) {
                        // 保留小数点后面0位
                        return (num/100000000).toFixed(2) + '亿'
                    }else if (num>=10000 && num<100000000) {
                        return (num/10000).toFixed(2) + '万'
                    }
        }
        return { changeCount }
    },
    
    props:['SongDetails'],
   
};
</script>

<style lang="scss" scoped>
.centercontainer{
    width: 100%;
    display: flex;
    .left{
        width: 50%;
        height: 3.5rem;
        position: relative;
        .touxiang{
            width: 2.3rem;
            height: 2.3rem;
            margin-top: .6rem;
            margin-left: .76rem;
            border-radius: .2rem;
        }
        .playcount{
            position: absolute;
            top: .6rem;
            left: 1.4rem;
            color: #fff;
            line-height: .32rem;
            .icon{
                width: 0.3rem;
                vertical-align: bottom;
                height: .32rem;
            }
            .count{
                font-size: .28rem;
            }
        }
    }
    .right{
        width: 50%;
        height: 3.5rem;
        .top{
            width: 100%;
            font-size: .28rem;
            color: #fff;
            margin-top: .4rem;
        }
        .center{
            display: flex;
            margin-top: .4rem;
            justify-content: flex-start;
            color: #fff;
            .nickname{
                display: inline-block;
                margin: 0 .3rem;
                line-height: .5rem;
                font-size: .28rem;
            }
            .authorimg{
                width: .5rem;
                height: .5rem;
                border-radius: 50%;
            }
        }
        .bottom{
            width: 100%;
            height: 2rem;
            display: flex;
            margin-top: .4rem;
            .drcipt{
                display: inline-block;
                width: 100%;
                /*第一步： 溢出隐藏 */
                overflow: hidden;
                /* 第二步：让文本不会换行， 在同一行继续 */
                white-space: nowrap;
                /* 第三步：用省略号来代表未显示完的文本 */
                text-overflow: ellipsis;
                font-size: .24rem;
                color: rgb(255, 255, 255);
            }
        }
    }
}
</style>